<!--suppress ALL -->
<template>
	<view class="background">
	    <uni-card>
		    <text class="top_text" >
			2024-2025第一学期
		    </text>
		    <image class="top-img" src="../../static/qie_huan.png"
			 style="width: 14px;height: 14px; opacity: 1;"></image>
			
		</uni-card>	
		
		<uni-card class="img_containner">
			<navigator url="../counselor/semester_reported">
			    <image class="img1" src="../../static/shang_bao.png" 
			    style="width: 40%; height: 100px;"
			    mode="widthFix"></image>
			    <text class="text_withImg1">本学期已上报</text>
			</navigator>
			
			<navigator url="../counselor/semester_abnormal">
			    <image class="img2" src="../../static/yi_chang.png"
			    style="width: 40%; height: 100px;"
			    mode="widthFix"></image>
			    <text class="text_withImg2">本学异常名单</text>
			</navigator>
		</uni-card>
		
        <view class="Submit_record_date_parent">
			<text style="padding: 2px; margin-left: 10px;">日期列表</text>
			<navigator url="/pages/counselor/week_abnormal">
			<view class="Submit_record_date" style="color: #006DFF;">本周</view>
			</navigator>
		</view>
		
		<view class="flex-container">
		    <view class="content">
		    <text class="content_list" v-for="(item, index) in student">
			
			<uni-card class="registationed_card">
			    <image src="../../static/registrationed.png" style="width: 16px; height: 16px;"
				class="registationed_img"></image>   
				<view class="registationed_name">{{item.name}}</view>
				<view class="registationed_num">{{item.number}}</view>
			    <view>学院:{{item.college}}</view>
				<view>专业:{{item.major}}</view>
				<view class="dashed-text">异常情况说明</view>
				<view>辅导员姓名:{{item.counselor.name}}</view>
				<view>工号:{{item.counselor.id}}</view>
				<view class="status" style="color:#006DFF">恢复上报</view>
			</uni-card>
			
			<br></text>
		    </view>
		</view>
		
	</view>
</template>

<script setup>
	
import { ref } from 'vue';

const student = ref(
    [{
        name: '龚熙',
        number: '20200909',
        college: 'A学院',
        major: 'A专业',
        counselor: {
            name: '葛海峡',
            id: '10086'
        },
    },
	{
        name: '李华',
        number: '20210101',
        college: 'B学院',
        major: 'B专业',
        counselor: {
            name: '王强',
            id: '10087'
        },
    },
    {
        name: '张明',
        number: '20220303',
        college: 'C学院',
        major: 'C专业',
        counselor: {
            name: '赵悦',
            id: '10088'
        },
    },
    {
        name: '王丽',
        number: '20230505',
        college: 'D学院',
        major: 'D专业',
        counselor: {
            name: '孙浩',
            id: '10089'
        },
    },
    {
        name: '陈杰',
        number: '20240707',
        college: 'E学院',
        major: 'E专业',
        counselor: {
            name: '周琳',
            id: '10090'
        },
    }]
);
	
</script>

<style scoped>
	.img_containner{
		overflow: hidden;
	}
	
	.img2{

        margin: 8px;
	}
	
	.img1{
        margin: 8px;

	}
	
	.img1,.img2{
		float: left;
	}
	
	.top-img{
		margin-top: 10px;
	}

	       
	.background{
		  position: absolute;
		  top: 0;
		  left: 0;
		  width: 100%;
		  height: 100%;
		  background: #F3F5F9;
	}	   
		   
	.top_text{
		width: 172px;
		height: 21px;
		font-family: PingFangSC-Medium;
		font-weight: 500px;
		font-size: 15px;
		color: #000000;
		letter-spacing: 0;
		margin:20px ;
	}
	
	.text_withImg1{
		position: absolute;
	    top: 50%;
		left: 25%;
		transform: translate(-50%, -50%);
		color: #fff;
		font-size: 30rpx;
	}
	
	.text_withImg2{
		position: absolute;
	    top: 50%;
		left: 67%;
		transform: translate(-50%, -50%);
		color: #fff;
		font-size: 30rpx;
	}
	
	.Submit_record_date{
		display: flex;
		flex-direction: row-reverse;
		margin-right: 50px;
	}
	
	.Submit_record_date_parent{
	    display: flex;
		align-items: center; 
		justify-content: space-between; 
	}
	
    .flex-container {
        display: flex;
        background-color: #ffffff;
		margin-top: 10px;
		width: 90vw;
		margin-left: 5%;
        }
		
    .content {
        flex: 1; /* 让内容区域占满父容器，会根据内容自动调整大小 */
       }
	
	.content_list{
		padding: 10px;
	}
	
	.registationed_img{
		display: flex;
		margin-top: 19px;
		margin-left: 5px;
	}
	
	.registationed_card{
		display: flex;
	}
	
	.dashed-text {
	  border-bottom: 1px dashed #ccc;
	}
	
	.registationed_name{
		display: flex;
		margin-top: 19px;
		text-indent: 10px;
	}
	
	.registationed_num{
		display: flex;
		text-indent: 180px;
	}
	
	.registationed_img,.registationed_name,.registationed_num{
		display: inline-block;
	}
	
	.uni-card>view{
		padding: 15px;
	}
	
	.uni-card{
		padding: auto;
		margin-top:12px;
	}
	
</style>
